<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>“介绍”中的例子</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
<h1>官方的基础例子：</h1>
<hr><h3>〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓  Counter: num  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓</h3>
<div id="counter" class="demo">
	Counter: {{ counter }}
</div>
<script>
const Counter = {
	data() {
		return {
			counter: 0
		}
	},
	mounted() {
		setInterval(() => {
			this.counter++
		}, 1000)
	}
}
Vue.createApp(Counter).mount('#counter');
</script>

<hr><h3>〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓  鼠标悬停  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓</h3>
<div id="bind-attribute" class="demo">
	<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span><hr>
	<span v-bind:title="'支持字面量'">鼠标悬停几秒钟查看此处动态绑定的提示信息！2</span>
</div>
<script>
const AttributeBinding = {
	data() {
		return {
			message: 'You loaded this page on ' + new Date().toLocaleString()
		}
	}
}
Vue.createApp(AttributeBinding).mount('#bind-attribute')
</script>

<hr><h3>〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓  反转 Message  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓</h3>
<div id="event-handling" class="demo">
	<p>{{ message }}</p>
	<button v-on:click="reverseMessage">反转 Message</button>
</div>
<script>
const EventHandling = {
	data() {
		return {
			message: 'Hello Vue.js!'
		}
	},
	methods: {
		reverseMessage() {
			this.message = this.message.split('').reverse().join('')
		}
	}
}
Vue.createApp(EventHandling).mount('#event-handling')

// eq:
var msg='Hello Vue.js!';
console.log(msg.split('')); //["H", "e", "l", "l", "o", " ", "V", "u", "e", ".", "j", "s", "!"]
console.log(msg.split('').reverse());//["!", "s", "j", ".", "e", "u", "V", " ", "o", "l", "l", "e", "H"]
console.log(msg.split('').reverse().join(''));//!sj.euV olleH
</script>

<hr><h3>〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓  双向绑定  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓</h3>
<div id="two-way-binding" class="demo">
	<p>{{ message }}</p>
	<input v-model="message" />
</div>
<script>
const TwoWayBindingApp = {
	data() {
		return {
			message: 'Hello Vue!'
		}
	}
}
Vue.createApp(TwoWayBindingApp).mount('#two-way-binding');
</script>

<hr><h3>〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓  隐藏 与 显示  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓</h3>
<div id="conditional-rendering" class="demo">
	<span v-if="seen">现在你看到我了</span><br>
	<button v-on:click="reverseMessage">seen = false （隐藏）</button><br>
	<button v-on:click="appearMessage">seen = true （显示）</button><br>
	<!-- v-on 的缩写：使用 @ -->
	<button @click="appearMessage">seen = true （显示）</button><br>
</div>
<script>
const ConditionalRenderingApp = {
	data() {
		return {
			seen: true
		}
	},
	methods: {
		reverseMessage() {
			this.seen = false
		},
		appearMessage() {
			this.seen = true
		}
	}
}
Vue.createApp(ConditionalRenderingApp).mount('#conditional-rendering')
</script>

<hr><h3>〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓  循环  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓</h3>
<div id="list-rendering" class="demo">
	<ol>
		<li v-for="todo in todos">
			{{ todo.text }}
		</li>
	</ol>
</div>
<script>
const ListRenderingApp = {
	data() {
		return {
			todos: [
				{ text: 'Learn JavaScript' },
				{ text: 'Learn Vue' },
				{ text: 'Build something awesome' }
			]
		}
	}
}
Vue.createApp(ListRenderingApp).mount('#list-rendering');
</script>

<hr><h3>〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓  组件化应用构建  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓</h3>
<div id="components-app" class="demo">
	<ol>
		<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
	</ol>
</div>
<script>
const ComponentsApp = {
	data() {
		return {
			groceryList: [
				{ id: 0, text: 'Vegetables' },
				{ id: 1, text: 'Cheese' },
				{ id: 2, text: 'Whatever else humans are supposed to eat' }
			]
		}
	}
}
const app = Vue.createApp(ComponentsApp)
app.component('todo-item', {
	props: ['todo'],
	template: `<li>ID{{todo.id}} ： {{ todo.text }}</li>`
})
app.mount('#components-app')
</script>






</body>
</html>

